<template>
  <div class="subPage">
    <nav-bar
      :title="navTitle" 
      position="center" 
      color='linear-gradient(90deg,rgba(85,125,245,1) 0%,rgba(63,74,222,1) 100%)' 
      :rowColor="'white'" 
      :goBack="goBack" 
      :isMsg='false' 
      fontColor='#fff' ></nav-bar>
    <scroll-view 
    :scroll-y="true"  
    :show-scrollbar="false"
    v-if="recordList.length>0"
    class="flexContent"
    :refresher-triggered="triggered" 
    :refresher-enabled="enabled" 
    @refresherrefresh="refresh"
    :scroll-with-animation='true'
    >
      <!-- 直播列表 -->
      <div v-if="searchType == 1" >
          <div class="liveBox" v-for="(item,i) in recordList" :key="i" @click="goliveRoom(item)">
            <div class="liveMsg" v-if="item.status === 3">
              <span class="topSign" >
                {{item.dept_name}}
              </span>
              <img mode="WidthFix" :src="videoBg" alt="">
              <div class="bottomMsg" >
                <span>{{item.live_theme}}</span>
                <span>
                  <img :src="item.doctor_image" alt="">
                  <p>{{item.doctor_name}}</p>
                </span>
              </div>
            </div>
            <div v-else class="liveMsg2">
              <span class="topSign" >
                {{item.dept_name}}
              </span>
              <div class="center" >
                <img :src="item.doctor_image" alt="">
              </div>
              <div class="liveTitle">
                {{item.live_theme}}
              </div>
              <div class="liveInfo">
                <span>直播人:{{item.doctor_name}}</span>
                <span>直播开始时间:{{item.begin_time}}</span>
              </div>
            </div>
          </div>
      </div>
      <!-- 模糊搜索视频列表  科室类别视频列表-->
      <div v-if="searchType == 2 || searchType == 3">
        <div class="liveBox" v-for="(item,i) in recordList" :key="i" @click="clickFile(item)">
          <div class="liveMsg">
            <span class="topSign" :style="{background:item.file_type.color}" >
              {{item.file_type.name}}
            </span>
            <img mode="WidthFix" :src="item.picture" alt="">
            <div class="bottomMsg" >
              <span>{{item.title}}</span>
            </div>
            <span class="playBtn" v-if="item.file_type.color!=='#3CDFF5'" >
              <img src="/static/images/video_play.png" alt="">
            </span>
          </div>
        </div>
      </div>
      <!-- 有当天直播数据情况下 显示的历史直播 -->
      <div v-if="searchType == 1 && recordList.length>0" class="historyVideoListBox">
        <div class="title">
          历史直播
          <span class="moreBtn" @click="goHistoryList" >
            更多
            <img src="/static/images/right_row_deep.png" alt=">">
          </span>
        </div>
        <ul v-if="historyVideo.length>0" >
          <li v-for="item in historyVideo" :key="item.video_type" @click="clickFile(item)" >
            <div class="videoTopicImg">
              <img :src="item.picture" :alt="item.title">
              <span class="tips" :style="{background:item.file_type.color}">{{item.file_type.name}}</span>
              <span class="playBtn"  v-if="item.file_type.color!=='#3CDFF5'" >
                <img src="/static/images/video_play.png" alt="">
              </span>
            </div>
            <div class="desc">{{item.title}}</div>
          </li>
        </ul>
        <div v-else class="noVideoImg">
          <img :src="noDataImg"/>
        </div>
      </div>
    </scroll-view>
    <div v-else class="noDataImg">
      <img :src="noDataImg"/>
    </div>
    <!-- 当天无直播数据情况下 显示历史直播 -->
    <div v-if="searchType == 1 && recordList.length==0" class="historyVideoListBox">
      <div class="title">
        历史直播
        <span class="moreBtn" @click="goHistoryList" >
          更多
          <img src="/static/images/right_row_deep.png" alt=">">
        </span>
      </div>
      <ul v-if="historyVideo.length>0" >
        <li v-for="item in historyVideo" :key="item.video_type" @click="clickFile(item)" >
          <div class="videoTopicImg">
            <img :src="item.picture" :alt="item.title">
            <span class="tips" :style="{background:item.file_type.color}">{{item.file_type.name}}</span>
            <span class="playBtn"  v-if="item.file_type.color!=='#3CDFF5'" >
              <img src="/static/images/video_play.png" alt="">
            </span>
          </div>
          <div class="desc">{{item.title}}</div>
        </li>
      </ul>
      <div v-else class="noVideoImg">
        <img :src="noDataImg"/>
      </div>
    </div>
    <i-message id="message" />
    <i-toast id="toast" />
  </div>
</template>
<script>
import api from "@/api/api";
import storage from "@/utils/storage";
import navBar from '@/components/navBar'
import { mapState } from 'vuex'
const { $Toast, $Message } = require("../../../../../static/iview/base/index");
export default {
  components: {
    navBar
  },
  computed: {
    ...mapState([
      'ifIphonex'
    ])
  },
  data() {
    return {
      userInfo: {},
      imgUrl: "",
      noDataImg: '',
      videoBg: '',
      navTitle: "健康教育",
      recordList: [],
      historyVideo: [],
      triggered: false,
      enabled: true,
      searchType: 1  // 1-直播列表 2-模糊搜索视频 3-科室类别搜索视频
    };
  },
  onLoad() {
    Object.assign(this.$data, {})
    this.imgUrl = api.imgUrl;
    this.userInfo = this.$storage.getAccountInfo();
    this.noDataImg = this.imgUrl + 'noData.png'
    this.videoBg = this.imgUrl + 'videoBg.png'
  },
  onShow() {
    this.refresh()
  },
  onUnload() {
    this.recordList = []
  },
  methods: {
    // 下拉刷新
    refresh() {
      if(this.$route.query.key_words) {
        this.keywordSearch()
        this.searchType = 2
      } else if (this.$route.query.video_type) {
        this.queryDeptVideo()
        this.searchType = 3
      } else {
        this.searchType = 1
        this.queryList()
        this.gethistoryVideo()
      }
    },
    // 获取直播列表
    queryList() {
      this.triggered = true
      let time = this.$utils.filterTime(new Date().getTime()/1000, 2)
      this.$api.getLiveTodayList({begin_time:time},{'showLoading': true}).then(res=>{
        this.triggered = false
        this.recordList = res.data
        if(this.recordList.length > 0) {
          wx.showToast({
            title: '刷新成功',
            icon: 'none',
            duration: 1000
          })
        }
      })
    },
    // 历史直播列表
    gethistoryVideo() {
      let param = {
        video_type: '7',
        type_id: '-1',
        patient: '1'
      }
      this.$api.videoTypeDeptSearch(param,{'showLoading': true}).then(res=>{
        this.triggered = false
        this.historyVideo = res.data.slice(0,3)
        this.historyVideo.forEach((ele,i)=>{
          this.historyVideo[i].file_type = this.notifyFileType(ele.video)
        })
        if(this.historyVideo.length > 0) {
          wx.showToast({
            title: '刷新成功',
            icon: 'none',
            duration: 1000
          })
        }
      })
    },
    // 判断文件类型
    notifyFileType(url) {
      let arr = url.split('.')
      if(arr[arr.length-1] == "mp4") {
        return {name:'视频', color: '#3CE48F'}
      } else if (arr[arr.length-1] == "mp3") {
        return {name:'音频', color: '#FF7B7B'}
      } else {
        return {name:'文件', color: '#3CDFF5'}
      }
    },
    // 获取分类下科室所属视频
    queryDeptVideo() {
      this.triggered = true
      console.log(this.$route.query,'类别搜索视频')
      let param = this.$route.query
      this.$api.videoTypeDeptSearch(param,{'showLoading': true}).then(res=>{
        this.triggered = false
        this.recordList = res.data
        this.recordList.forEach((ele,i)=>{
          this.recordList[i].file_type = this.notifyFileType(ele.video)
        })
        if(this.recordList.length > 0) {
          wx.showToast({
            title: '刷新成功',
            icon: 'none',
            duration: 1000
          })
        }
      })
    },
    // 模糊搜索视频
    keywordSearch() {
      console.log(this.$route.query,'模糊搜索视频')
      this.triggered = true
      let param = this.$route.query
      this.$api.keywordSearch(param,{'showLoading': true}).then(res=>{
        this.triggered = false
        this.recordList = res.data
        this.recordList.forEach((ele,i)=>{
          this.recordList[i].file_type = this.notifyFileType(ele.video)
        })
        if(this.recordList.length > 0) {
          wx.showToast({
            title: '刷新成功',
            icon: 'none',
            duration: 1000
          })
        }
      })
    },
    // 进入直播间
    goliveRoom (e) {
      console.log('执行')
       this.$router.push(`/pages/subPage/liveVideoArea/liveRoom/main?url=${e.pull_stream}&status=${e.status}&roomId=${e.roomid}&doctor_name=${e.doctor_name}&skilled_in=${e.skilled_in}&doctor_image=${e.doctor_image}&dept_name=${e.dept_name}&doctor_image=${e.doctor_image}&title=${e.title}`)
    },
    // 点击内容
    clickFile(item) {
      if(item.file_type.name == '文件') {
        this.viewFile(item.video)
      } else {
        this.$router.push(`/pages/subPage/liveVideoArea/videoPlayRoom/main?type=${item.file_type.name}&src=${item.video}`)
      }
    },
    // 打开文件
    viewFile(url) {
      wx.showLoading({
        title: "加载中...",
        mask: true
      });
      let arr = url.split('.');
      if(arr[arr.length-1]=='jpg'||arr[arr.length-1]=='png'||arr[arr.length-1]=='gif') {
        mpvue.previewImage({
          current: url, // 当前显示图片的http链接
          urls: [url] // 需要预览的图片http链接列表
        })
        wx.hideLoading()
        return
      }
      wx.downloadFile({
        url: url,
        success: function (res) {
          const filePath = res.tempFilePath
          wx.openDocument({
            filePath: filePath,
            success: function (res) {
              console.log('打开文档成功')
              wx.hideLoading()
            }
          })
        }
      })
    },
    // 历史直播列表
    goHistoryList() {
      this.$router.push("/pages/subPage/liveVideoArea/historyList/main")
    },
    goBack() {
      this.$router.go(-1)
    }
  }
};
</script>
<style scoped lang="less">
.subPage {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.flexContent {
  flex: 1;
  position: relative;
  overflow-y: scroll;
  padding-bottom: 40rpx;
  .liveBox {
    margin: 15px 0;
    height: 429rpx;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 0 30rpx;
    overflow: hidden;
    .liveMsg {
      overflow: hidden;
      position: relative;
      border-radius: 10rpx;
      flex: 1;
      .topSign {
        position: absolute;
        display: block;
        left: 0;
        top: 0;
        height: 62rpx;
        min-width: 66rpx;
        background: #3CE48F;
        color: #fff;
        font-size: 26rpx;
        text-align: center;
        border-radius: 8rpx 0 62rpx 0;
        line-height: 62rpx;
        padding: 0 40rpx 0 20rpx;
      }
      img {
        height: 100%;
        width: 100%;
      }
      .bottomMsg {
        position: absolute;
        bottom: 0rpx;
        height: 73rpx;
        width: 100%;
        background: rgba(4, 4, 4, 0.34);
        color: #fff;
        font-size: 32rpx;
        line-height: 73rpx;
        display: flex;
        padding-left: 40rpx;
        box-sizing: border-box;
        span {
          display: inline-block;
        }
        span:nth-child(1) {
          flex: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        span:nth-child(2) {
          display: inline-block;
          display: flex;
          position: relative;
          min-width: 120rpx;
          max-width: 300rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          height: 100%;
          img {
            height: 42rpx;
            width: 42rpx;
            border-radius: 21rpx;
            margin-top: 17rpx;
            margin-right: 20rpx;
          }
          p {
            flex: 1;
            display: inline-block;
            font-size: 24rpx;
            margin-right: 40rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            box-sizing: border-box;
          }
        }
      }
      .playBtn {
        position: absolute;
        top: 30%;
        left: 50%;
        transform: translateX(-50%);
        height: 125rpx;
        width: 125rpx;
        img {
          height: 100%;
          width: 100%;
        }
      }
    }
    .liveMsg2 {
      background: linear-gradient(144deg, #7C9FFF 0%, #658EFF 100%);
      position: relative;
      border-radius: 10rpx;
      flex: 1;
      color: #fff;
      .topSign {
        position: absolute;
        display: block;
        left: 0;
        top: 0;
        height: 62rpx;
        min-width: 112rpx;
        background: #3CE48F;
        color: #fff;
        font-size: 26rpx;
        text-align: center;
        border-radius: 8rpx 0 62rpx 0;
        line-height: 62rpx;
        padding: 0 30rpx 0 20rpx;
      }
      .center {
        text-align: center;
        img {
          width: 114rpx;
          height: 114rpx;
          margin-top: 92rpx;
          border-radius: 77rpx;
        }
      }
      .liveTitle {
        font-size: 32rpx;
        text-align: center;
        margin: 30rpx 0 20rpx 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .liveInfo {
        text-align: center;
        font-size: 24rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        margin-bottom: 20rpx;
        span {
          margin-left: 20rpx;
        }
      }
    }
  }
  .blueColor {
    color: #4A71E8;
  }
  .ipxBottom {
    height: 30rpx;
  }
}
.noDataImg {
  flex: 1;
}
.initTop {
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 22;
  display: flex;
  flex-direction: column;
  .addressDiv {
    background: rgba(255, 255, 255, 1);
    flex: 1;
    width: 100%;
    border-radius: 10rpx;
    .init1 {
      height: 110rpx;
      line-height: 110rpx;
      padding-left: 39rpx;
      font-size: 34rpx;
      font-weight: bold;
    }
    .item {
      height: 100rpx;
      line-height: 100rpx;
      padding: 0 33rpx 0 34rpx;
      display: flex;
      .name {
        font-size: 34rpx;
        color: #333333;
      }
      .ipt {
        flex: 1;
        height: 100rpx;
        line-height: 100rpx;
        text-align: right;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-left: 30rpx;
      }
    }
    .borderBtm {
      border-bottom: 1rpx solid #e9e9e9;
    }
  }
}
.modal {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(0,0,0,.7);
  opacity: 1;
  z-index: 100;
  .out {
    height: 412rpx;
    border-radius: 15rpx;
    width: 650rpx;
    background: #fff;
    z-index: 999;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -206rpx;
    margin-left: -325rpx;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .top {
      flex: 1;
      padding: 110rpx 48rpx 0 48rpx;
      text-align: center;
      span {
        font-size: 34rpx;
        font-family:PingFangSC-Regular,PingFangSC;
        font-weight:400;
        line-height:48rpx;
      }
    }
    .btm {
      height: 100rpx;
      line-height: 100rpx;
      display: flex;
      font-size:34rpx;
      font-family:PingFangSC-Regular,PingFangSC;
      font-weight:400;
      .sure {
        background:#4A64EA;
        color: #fff;
      }
      span {
        flex: 1;
        text-align: center;
      }
      span:nth-child(1) {
        background: #f9f9f9;
      }
      span:nth-child(2) {
        background:#4A64EA;
        color: #fff;
      }
    }
  }
}
.historyVideoListBox {
  width: 100%;
  overflow: hidden;
  margin-bottom: 34rpx;
  padding: 0 30rpx;
  box-sizing: border-box;
  .title {
    display: flex;
    align-items: center;
    font-weight: 600;
    font-size: 36rpx;
    color: #27354B;
    .moreBtn {
      font-size: 30rpx;
      color: #999999;
      flex: 1;
      text-align: right;
      font-weight: 500;
      img {
        float: right;
        margin-left: 17rpx;
        margin-top: 8.5rpx;
        width: 15rpx;
        height: 27rpx;
      }
    }
  }
  ul{
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    li {
      margin-top: 38rpx;
      height: 204rpx;
      width: 214rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .videoTopicImg {
        position: relative;
        margin-bottom: 10rpx;
        border-radius: 6rpx;
        overflow: hidden;
        img {
          width: 213rpx;
          height: 148rpx;
          border-radius: 6rpx;
        }
        .tips {
          height: 41rpx;
          width: 74rpx;
          line-height: 41rpx;
          text-align: center;
          left: 0;
          top: 0;
          position: absolute;
          color: #fff;
          font-size: 22rpx;
          // background-color:#3CE48F;
          border-radius: 0 0 22rpx 0;
        }
        .playBtn {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translateX(-50%) translateY(-50%);
          img {
            height: 65rpx;
            width: 65rpx;
          }
        }
      }
      .desc {
        font-size: 30rpx;
        height: 35rpx;
        line-height: 35rpx;
        display: block;
        text-align: center;
        color: #666666;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}
</style>
